<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html"%>
<%@ taglib prefix="bean" uri="http://struts.apache.org/tags-bean"%>
<%@ taglib prefix="logic" uri="http://struts.apache.org/tags-logic"%>
<%@ taglib prefix="core" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="display" uri="http://displaytag.sf.net"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="id" lang="id">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
	<script type="application/javascript" src="scripts/jscharts.js"> </script>
<script>
		window.addEvent('domready', function(){ 
			new Picker.Date('vista1', {
				pickerClass: 'datepicker_vista'
			});
			new Picker.Date('vista2', {
				pickerClass: 'datepicker_vista'
			});
		});
</script>  
</head>
<body>
	<html:form action="/dashResource.do">
	<div class="outerbox"> 
		<div class="mainHeading">
			<div class=""
				style="width: 320px; height: 32px; background: url(images/formTitleBackground.png) no-repeat top right; font-color: #CC0000;">
				<h2 class="formTitle">H.R. STATISTICS</h2>
			</div>
		</div> 
		<br class="clear" />
		<br class="clear" />
		<br class="clear" />
		<br class="clear" />
		<br class="clear" />
		<br class="clear" />
		<br class="clear" />
		<br class="clear" />
	</div>
	<div class="outerbox"> 
		<br class="clear" />
		<br class="clear" /> 
		<table>
			<tr>
	            <td><div id="graph"></div></td>
				<td><div id="graph2"></div></td>
				<td><div id="graph3"></div></td>
			</tr>
        </table>
		
         <script type="text/javascript"> 
         	var colorsEx = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8', 
			                '#006600', '#0066FF', '#FF9999', '#00CC00', '#FF6666', '#CCFF99', '#FFFFCC',
			                '#CCCCFF', '#FFCC66', '#99CC00', '#660000', '#660033', '#990000', '#336633'];
 		    var partsName = "<%=(String)request.getAttribute("pie_partsName")%>";
  		    var partsNumber = "<%=(String)request.getAttribute("pie_partsNumber")%>";
  		   	var totalLeaveDays = "<%=(Float)request.getAttribute("pie_totalLeaveDays")%>";
  		    var pie_topic = "<%=(String)request.getAttribute("pie_topic")%>";
  		   	
  		  if(partsNumber != null && partsNumber != '' && partsNumber != 'null'){
		    	var indexesNumber = partsNumber.split(';');
    		    var indexesName = partsName.split(';');
	     		   var myChart = new JSChart('graph', 'pie');
	     		   var count = 0;
	     		   for(var i = 0; i < indexesNumber.length; i ++){
	     			  if(parseFloat(indexesNumber[i]) != 0){
	     				  count ++;
	     			  }
	     		   }
	     		    var dataArr = new Array(count);
	     		    var idArr = 0;
	     		    for(var i = 0; i < indexesNumber.length; i ++){
	     		    	if(parseFloat(indexesNumber[i]) != 0){
	     		    		dataArr[idArr] = new Array(2);
		     		    	dataArr[idArr][1] = parseFloat(indexesNumber[i]);
		     		    	var percent = dataArr[idArr][1] * 100 / totalLeaveDays;
		     		    	dataArr[idArr][0] = percent.toFixed(1) + '%';
		     		    	myChart.setLegend(colorsEx[idArr], indexesName[i]);
		     		    	idArr ++;
	     		    	} 
	     		    } 
					myChart.setDataArray(dataArr);
					myChart.colorize(colorsEx.slice(0, count));
					myChart.setTitle(pie_topic);
					myChart.setTitleFontFamily('Times New Roman');
					myChart.setTitleFontSize(14);
					myChart.setTitleColor('#0F0F0F');
					myChart.setPieRadius(100);
					myChart.setPieValuesColor('#FFFFFF');
					myChart.setLegendColor('#0F0F0F');
					myChart.setPieUnitsColor('#0F0F0F');
					myChart.setPieValuesFontSize(9);
					myChart.setShowXValues(true);
					myChart.setLegendShow(true);
					myChart.setLegendFontFamily('Times New Roman');
					myChart.setLegendFontSize(10);
					myChart.setPieAngle(40);
					
					myChart.setSize(400, 400);
					myChart.setPiePosition(145, 160);
					myChart.setLegendPosition(250, 280);
					
					myChart.set3D(true); 
					myChart.draw();
		    }
		  </script> 
		  
		  <script type="text/javascript"> 
         	var colorsEx = ['#006CFF', '#FF6600', '#34A038', '#945D59', '#93BBF4', '#F493B8', 
			                '#006600', '#0066FF', '#FF9999', '#00CC00', '#FF6666', '#CCFF99', '#FFFFCC',
			                '#CCCCFF', '#FFCC66', '#99CC00', '#660000', '#660033', '#990000', '#336633'];
 		    var partsName = "<%=(String)request.getAttribute("pie2_partsName")%>";
  		    var partsNumber = "<%=(String)request.getAttribute("pie2_partsNumber")%>";
  		   	var totalLeaveDays = "<%=(Float)request.getAttribute("pie2_totalLeaveDays")%>";
  		    var pie2_topic = "<%=(String)request.getAttribute("pie2_topic")%>";
  		   	
  		    if(partsNumber != null && partsNumber != '' && partsNumber != 'null'){
  		    	var indexesNumber = partsNumber.split(';');
      		    var indexesName = partsName.split(';');
	     		   var myChart = new JSChart('graph2', 'pie');
	     		   var count = 0;
	     		   for(var i = 0; i < indexesNumber.length; i ++){
	     			  if(parseFloat(indexesNumber[i]) != 0){
	     				  count ++;
	     			  }
	     		   }
	     		    var dataArr = new Array(count);
	     		    var idArr = 0;
	     		    for(var i = 0; i < indexesNumber.length; i ++){
	     		    	if(parseFloat(indexesNumber[i]) != 0){
	     		    		dataArr[idArr] = new Array(2);
		     		    	dataArr[idArr][1] = parseFloat(indexesNumber[i]);
		     		    	var percent = dataArr[idArr][1] * 100 / totalLeaveDays;
		     		    	dataArr[idArr][0] = percent.toFixed(1) + '%';
		     		    	myChart.setLegend(colorsEx[idArr], indexesName[i]);
		     		    	idArr ++;
	     		    	} 
	     		    } 
					myChart.setDataArray(dataArr);
					myChart.colorize(colorsEx.slice(0, count));
					myChart.setTitle(pie2_topic);
					myChart.setTitleFontFamily('Times New Roman');
					myChart.setTitleFontSize(14);
					myChart.setTitleColor('#0F0F0F');
					myChart.setPieRadius(100);
					myChart.setPieValuesColor('#FFFFFF');
					myChart.setLegendColor('#0F0F0F');
					myChart.setPieUnitsColor('#0F0F0F');
					myChart.setPieValuesFontSize(9);
					myChart.setShowXValues(true);
					myChart.setLegendShow(true);
					myChart.setLegendFontFamily('Times New Roman');
					myChart.setLegendFontSize(10);
					
					myChart.setSize(400, 400);
					myChart.setPiePosition(145, 160);
					myChart.setLegendPosition(250, 250);
					
					myChart.setPieAngle(40);
					myChart.set3D(true); 
					myChart.draw();
  		    }
		  </script>  
	  
	  
		  <script type="text/javascript">
			    var bar_partsNumber = "<%=(String)request.getAttribute("bar_partsNumber")%>";
			    var bar_partsName = "<%=(String)request.getAttribute("bar_partsName")%>";
			    var bar_topic = "<%=(String)request.getAttribute("bar_topic")%>";
			    if(bar_partsNumber != null && bar_partsNumber != '' && bar_partsNumber != 'null'){
					var months = bar_partsName.split(";");
					var myData = new Array(months.length);
					var indexesNumber = bar_partsNumber.split(';');
					for(var i = 0; i < months.length; i ++){
						myData[i] = new Array(2);
						myData[i][0] = months[i];
						myData[i][1] = parseFloat(indexesNumber[i]);
					}
					var colors = ['#7979DB', '#7952E9', '#792BC8', '#792BA1', '#792BA1', '#792B79',
					              '#7979DB', '#7952E9', '#792BC8', '#792BA1', '#792BA1', '#792B79',
					              '#7979DB', '#7952E9', '#792BC8', '#792BA1', '#792BA1', '#792B79'];
					colors = colors.slice(0, months.length);
					var myChart = new JSChart('graph3', 'bar');
					myChart.setDataArray(myData);
					myChart.colorizeBars(colors);
					myChart.setTitleColor('#0F0F0F');
					myChart.setTitle(bar_topic);
					myChart.setTitleFontFamily('Times New Roman');
					myChart.setTitleFontSize(14);
					myChart.setAxisColor('#0F0F0F');
					myChart.setAxisWidth(1);
					myChart.setAxisNameX('Sub Unit');
					myChart.setAxisNameY('');
					myChart.setAxisNameColor('#0F0F0F');
					myChart.setAxisNameFontSize(9);
					myChart.setAxisPaddingLeft(50);
					myChart.setAxisValuesDecimals(1);
					myChart.setAxisValuesColor('#0F0F0F');
					myChart.setTextPaddingLeft(0);
					myChart.setBarValuesColor('#0F0F0F');
					myChart.setBarBorderWidth(1);
					myChart.setBarBorderColor('#FFFFFF');
					myChart.setGridColor('#5D5F5D');
					myChart.setAxisValuesAngle(30);
					myChart.setBarOpacity(0.55);
					myChart.setAxisPaddingBottom(120);
					myChart.setSize(420, 360);
					myChart.set3D(true); 
					myChart.draw();
			    }
			</script>  
		
	</div> 
	</html:form>
</body>
</html>